<template>
  <div class="page-modal">
    <!--    1.对话框-->
    <modal-dialog
      v-if="type === 'dialog'"
      :page-name="pageName"
      :layout="layout"
      :form="form"
      :is-show-modal="isShowPageModal"
      :is-edit-btn="props.isEditBtn"
      @cancelClick="cancelClick"
      @confirmClick="confirmClick"
    >
      <!--      插槽回传-->
      <template
        v-for="item in form.items"
        :key="item.prop"
        v-slot:[item.slotName]="formItem"
      >
        <slot
          v-if="item.slotName"
          v-bind="formItem"
          :name="item.slotName"
        ></slot>
      </template>
    </modal-dialog>
    <!--    2.抽屉-->
    <modal-drawer
      v-else-if="type === 'drawer'"
      :page-name="pageName"
      :layout="layout"
      :form="form"
      :is-show-modal="isShowPageModal"
      :is-edit-btn="props.isEditBtn"
      @cancelClick="cancelClick"
      @confirmClick="confirmClick"
    >
      <!--      插槽回传-->
      <template
        v-for="item in form.items"
        :key="item.prop"
        v-slot:[item.slotName]="formItem"
      >
        <slot
          v-if="item.slotName"
          v-bind="formItem"
          :name="item.slotName"
        ></slot>
      </template>
    </modal-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ModalDialog from '@/base-ui/modal/modal-dialog.vue'
import ModalDrawer from '@/base-ui/modal/modal-drawer.vue'
import type { IDialogAndDrawerLayout, ILyForm } from '@/global/types'

interface IProps {
  pageName?: string
  type?: string
  layout?: IDialogAndDrawerLayout
  form?: ILyForm
  isEditBtn?: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  isEditBtn: false
})

const isShowPageModal = ref(false)

// 定义事件
const emits = defineEmits(['cancelClick', 'confirmClick'])
// 取消按钮
const cancelClick = () => {
  emits('cancelClick')
}
// 确认按钮
const confirmClick = (info: any) => {
  emits('confirmClick', info)
}

// 定义一个方法给外界设置page-modal的状态
function setModalStatus(isVisible: boolean) {
  isShowPageModal.value = isVisible
}

defineExpose({ setModalStatus })
</script>

<style scoped lang="less">
.page-modal {
}
</style>
